<template>
  <el-select
    filterable
    :placeholder="place"
    v-model="value"
    :style="selectStyle"
    clearable
    :readOnly="disable"
    @change="selectChange"
  >
    <el-option
      v-for="item in supplierData"
      :key="item.supplierCode"
      :value="item.supplierCode"
      :label="item.supplierName"
    />
  </el-select>
</template>

<script>
import { getSupplierEntryAll } from '@/api/supplier'

export default {
  props: {
    disable: {
      type: Boolean,
      default: false
    },
    selectStyle: {
      type: Object,
      default() {
        return {}
      }
    },
    selectValue: {
      type: String,
      default: ''
    },
    place: {
      type: String,
      default() {
        return '请选择'
      }
    }
  },
  watch: {
    selectValue: {
      handler(n, o) {
        // if (n !== o) {
        console.log('watch n', n)
        this.value = n
        // }
      }
    }
  },
  data() {
    return {
      supplierData: [],
      value: this.selectValue
    }
  },
  mounted() {
    getSupplierEntryAll().then(res => {
      this.supplierData = res.data
    })
  },
  methods: {
    filterOption(input, option) {
      return option.componentOptions.children[0].text.indexOf(input) >= 0
    },
    selectChange(value) {
      this.value = value
      console.log('select value', value)
      this.$emit('select', value)
    }
  }
}
</script>
